import React, { Component } from 'react';
import { Divider, Button, Modal, Form, Input, Row, Col, Select, Radio, Table, Card, Icon, Popconfirm, message} from 'antd';
import { connect } from 'dva';
import styles from '../style.less';


const selectOptions = [
    {value: '西乡街道', key: '西乡街道'},
    {value: '宝安街道', key: '宝安街道'},
    {value: '龙岗街道', key: '龙岗街道'},
    {value: '南山街道', key: '南山街道'},
    {value: '龙华街道', key: '龙华街道'},
    {value: '罗湖街道', key: '罗湖街道'},
]

const children = []
selectOptions.forEach(v => {
    children.push(<Select.Option value={v.key} key={v.key}>{v.value}</Select.Option>)
})



// 重置密码
const ResetPwd = Form.create()(
    // eslint-disable-next-line react/prefer-stateless-function
    class extends React.Component {
        
        copyHandleClick = () => {  
            copy('123456789')
            message.success('复制成功！')
        }

        checkPsd2(rule, value, callback) {
            const password = this.props.form.getFieldValue('pwd1');
            if (password && password !== value) {
                callback(new Error('两次密码输入不一致！'));
            } else {
                callback();
            }
        }

        render() {
            const { visible, onCancel, onCreate, form, userName } = this.props
            const { getFieldDecorator } = form
            const formItemLayout = {
                labelCol: { span: 8 },
                wrapperCol: { span: 14 }
            }
            return (
                <Modal
                    visible={visible}
                    title="密码重置"
                    width='60%'
                    onCancel={onCancel}
                    onOk={onCreate}
                >
                    <Form style={{width: '80%', margin:'0 auto'}}>
                        <Row gutter={24}>
                            <Col span={24}>
                                <Form.Item label="账户名名称" {...formItemLayout}>
                                    <a>{userName}</a>
                                </Form.Item>
                            </Col>
                            <Col span={24}>
                                <Form.Item label="请输入新密码" {...formItemLayout} required={false}>
                                    {getFieldDecorator('pwd1', {
                                        rules: [
                                            { required: true, message: '请输入!'},
                                        ],
                                    })(<Input.Password placeholder="请输入" style={{width:'80%'}}/>)}
                                </Form.Item>
                            </Col>
                            <Col span={24}>
                                <Form.Item label="请输入新密码" {...formItemLayout} required={false}>
                                    {getFieldDecorator('pwd2', {
                                        rules: [
                                            { required: true, message: '请输入!'},
                                            { validator: (rule, value, callback) => { this.checkPsd2(rule, value, callback) } }
                                        ],
                                    })(<Input.Password placeholder="请输入" style={{width:'80%'}}/>)}
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>
                </Modal>
            )
        }
    }
)



class Index extends Component {
    state = {
        // 弹窗
        visible: false,
        uploading: false
    }

    resetFormRef = formRef => {
        this.resetRef = formRef
    }
    

    render () {

        const { visible } = this.props

        return (
            <>
                <ResetPwd 
                    wrappedComponentRef={this.resetFormRef}
                    visible={this.visible}
                    onCancel={this.handleCancel}
                    onCreate={this.resetPwdConfirm}
                    userName={this.state.resetUserName}
                />

            </>
        )


    }

}



export default Form.create()(Index);
